import { useMemo } from "react";
import { Image, Text, View } from "@tarojs/components";
import { observer } from 'mobx-react';
import { GStyleSheet, DynamicColors } from "@/utils/DarkMode";
import { useLanguageStore } from '@/hooks'
import { getAppInfo } from '@/config/template';

const dstyle = GStyleSheet.create({
  title: {
    color: DynamicColors.titleTextColor
  },
  icon: {
    width: 40,
    height: 40,
    marginLeft: 10,
    borderRadius: 20,
    marginRight: 10,
  },
  left: {
    flex: '1',
    height: '100%',
    justifyContent: 'flex-start',
    minWidth: '80rpx',
  },
});

const AppInfo = () => {
  const language = useLanguageStore();
  const styles = dstyle.useDynamicStyle();

  const appInfo = useMemo(() => {
    return getAppInfo(language.key);
  }, [language.key]);

  return (
    <View style={styles.left} className='centerFlex'>
      {appInfo.icon && <Image src={appInfo.icon} style={styles.icon} />}
      <View style={{ maxWidth: 130 }}>{appInfo.name && <Text style={styles.title}>{appInfo.name}</Text>}</View>
    </View>
  );
};

export default observer(AppInfo);
